<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アイテム入れ替え</title>
<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
.sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 720px;
}

.sortable li {
	float: left;
	margin: 3px 3px 3px 0;
	padding: 5px;
	text-align: center;
	font-size: 1em;
	width: 120px;
	height: 130px;
}

.sortable img {
	/* IE6が… 
	max-width: 100px;
	max-height: 100px;
	*/
	width: 100px;
}

.ui-state-disabled {
	background: url(../images/noPic.jpg) no-repeat center center;
	opacity: 1;
	filter: Alpha(Opacity =                                     100);
}
</style>
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script>
	$(function() {
		
		var list = [];
		var moveId = '';
		var beforePosition = -1;
		
		var sortable1 = $("#sortable1").sortable({
			placeholder : 'ui-state-highlight',
			cancel : 'li.ui-state-disabled',
			revert : 300, // 要素の吸着にアニメーション（時間）をかける
			opacity:0.7
		}).disableSelection();
		
		sortable1.bind('sortstart', function(event, ui){
			
			//console.log('sortstart');
			// 比較のために、移動前のリスト状態を保持しておく。
			list = getList();
		});
		
		sortable1.bind('sortchange', function(event, ui){
			//console.log('sort');
			
			// 要素の移動は可能そう
			//console.log($('#sortable1').find('li').eq(9).after('<li class="ui-state-default"><img id="pic003" src="../photo/clest1.jpg" /><br />clest1.jpg</li>'));
			
			//console.log(event);
			//console.log(ui);
			
			// helperが取得できるので移動した対象は判断可能
			//console.log( $(event.currentTarget.outerHTML).find('.ui-sortable-helper').html());
			//console.log( $(event.currentTarget.outerHTML).find('.ui-sortable-helper').find('img').attr('id'));
			moveId = $(event.currentTarget.outerHTML).find('.ui-sortable-helper').find('img').attr('id');
			
			// TODO 移動後の順番が取れる？
			//console.log( $(event.currentTarget.children));
			//console.log( $(event.currentTarget.outerHTML).find('.ui-state-default'));
			
			//TODO targetの場所をとってみる
			//console.log( $( event.target ) );

			//console.log( $( '#sortable1' ).index(ui.placeholder) );
			
			var afterList = [];
			
			($(event.currentTarget.outerHTML).find('li')).each(function(i,v){
				afterList.push($(v).find('img').attr('id'));
			});
			
			//console.log(afterList);
			//console.log(afterList.toString());
			
			//TODO test 要素の削除は反映される。
			//$('#sortable1').find('li').empty();
			//alert('now');
			
			// TODO ここにソートイベントを入れればいい？
		});
		
		sortable1.bind('sortstop', function(event, ui){
			
			//console.log('sortstop');
			
			// TODO 移動キャンセル処理はあるか？
			//sortable1.sortable('cancel');
			
			for (i=0; i < list.length; i++ ){
				if(list[i] == moveId){
					beforePosition = i;
					//console.log( beforePosition + '番目に' + moveId + 'があった');
				}
			}
			
			//console.log(moveId);
			
			var afterList = getList();
			
			
			for (i=0; i < afterList.length; i++ ){
				if(afterList[i] == moveId){
					
					var afterPosition = i;
					//console.log( afterPosition + '番目に' + moveId + 'を移動した');
					
					// 前から後ろへの要素移動
					if(beforePosition <= afterPosition){
						// TODO 移動先は空白だったか
						if(list[afterPosition] == undefined){
							// 空白なら移動の前後で場所交換
							//console.log(beforePosition + '番目の前に空白要素追加');
							$('#sortable1').find('li').eq(beforePosition).before('<li class="ui-state-default ui-state-disabled">*delete*</li>');
							//console.log(afterPosition + '番目は削除');
							$('#sortable1').find('li').eq(afterPosition).remove();
							
						}
						break;
					}
					
					// TODO 移動先は空白だったか
					if(list[afterPosition] == undefined){
						
						//console.log('移動前の' + afterPosition + '番目は空白');
						// 空白なら移動の前後で場所交換
						//console.log(afterPosition+1 + '番目は削除');
						$('#sortable1').find('li').eq(afterPosition + 1).remove();
						//console.log(beforePosition-1 + '番目の後ろに空白要素追加');
						$('#sortable1').find('li').eq(beforePosition -1).after('<li class="ui-state-default ui-state-disabled">*delete*</li>');
						break;
					}
				}
			}
			
			list = getList();
			
			$('#listOrder').html(list.toString());
		});
		
		/** '#sortable1'のid要素取得専用 */
		function getList(){
			
			// currentTargetは駄目そう
			//console.log(event.currentTarget.children);
			
			// helperは取れない代わりに、ソート前なので移動前の順番は取得可能
			// selectorをli要素に指定するとplaceholderまで対象となるのでNG
			// 「.ui-state-default」などを対象にすること。
			
			var data = [];
			
			$('.ui-state-default','#sortable1').each(function(i,v){
				data.push($(v).find('img').attr('id'));
			});
			
			//console.log(data);
			
			return data;
		}
	});
</script>
</head>
<body>
	<h2>イメージ入れ替え（list）</h2>
	<p>D&amp;Dで要素が移動できる。枠固定版</p>
	<div id="listOrder">順番表示</div>
	<ul id="sortable1" class="sortable">
		<li class="ui-state-default"><img id="pic001" src="../images/ikd.jpg" /><br />ikd.jpg<br /></li>
		<li class="ui-state-default"><img id="pic002" src="../images/kuma.gif" /><br />kuma.gif</li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<!-- 5 -->
		<li class="ui-state-default"><img id="pic003" src="../photo/clest1.jpg" /><br />clest1.jpg</li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<!-- 10 -->
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<li class="ui-state-default ui-state-disabled"></li>
		<!-- 15 -->
	</ul>
	<div style="clear: both"></div>
</body>
</html>